<template>
  <view class="catgory-wrap">
    <view class="u-flex wrapper-box">
      <!-- 左侧分类列表 -->
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollLeftTop">
        <view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item u-ellipsis-1"
          :class="[currentTab == index ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(index)">
          <text class="menu-name">{{ item.name }}</text>
        </view>
        <view class="hack-tabbar"></view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <view class="right-wrap ">
        <scroll-view scroll-y class="right-box menu-scroll-view" @scrolltolower="loadMore" v-if="tabbarList.length">
          <view class="u-flex u-row-center" v-if="tabbarList[currentTab].image">
            <image class="category-img" :src="tabbarList[currentTab].image" mode="aspectFill"></image>
          </view>
          <view class="category-title">{{ tabbarList[currentTab].name }}</view>

          <view class="sh-big-card-wrap u-m-20 " v-for="(item, index) in goodsList" :key="item.id">
            <view class="big-goods-card" @tap="jump('/pages/goods/detail', { id: item.id })">
              <view class="img-wrap u-m-b-20">
                <image class="goods-img" :src="item.image" mode="aspectFill"></image>
                <image class="goods-tag" v-if="item.is_hot && !item.activity"
                  :src="$IMG_URL + '/goods/goods_hot_tag.png'" mode=""></image>
              </view>
              <view class="goods-title u-p-x-20 u-m-b-10 u-ellipsis-2">
                <view v-if="item.activity_type" class=" sm cu-tag radius title-tag u-m-r-10"
                  :style="{ backgroundColor: typeMap[item.activity_type].tagBg, color: '#fff' }">
                  {{ typeMap[item.activity_type].text }}
                </view>
                {{ item.title }}
              </view>
              <view class="goods-subtitle u-p-x-20 u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
              <!-- 满减，满折 -->
              <view class="u-p-x-20" v-if="item.activity_discounts_tags.length">
                <view class="tag-box u-m-b-10 u-m-r-10" v-for="(tag, index1) in item.activity_discounts_tags"
                  :key="index1">{{ tag }}</view>
              </view>
              <view class="goods-progress u-p-x-20 u-flex u-m-b-10">
                <view style="width:230rpx;">
                  <u-line-progress height="16" :show-percent="false" :percent="Number(item.percent)"
                    active-color="#0099E5"></u-line-progress>
                </view>
                <view class="googs-send-num u-m-l-20">已售{{ item.sales }}件</view>
              </view>
              <view class="u-flex u-row-between u-p-x-20">
                <view class="price-box u-flex font-OPPOSANS">
                  <view class="price">{{ item.price }}</view>
                  <view class="origin-price u-m-l-10">￥{{ item.original_price }}</view>
                </view>
                <view class="cart-box">
                  <!-- 单规格 -->
                  <view class="" v-if="!item.activity">
                    <view v-if="!item.is_sku">
                      <button v-if="!isCart(item.id)"
                        :style="item.activity_type ? typeMap[item.activity_type].btnBg : ''"
                        @tap.stop="addCart(item.sku_price[0])" class="u-reset-button cart-btn">
                        加入洗衣车
                      </button>
                      <view class="num-step" @tap.stop v-else>
                        <u-number-box :value="checkCart[item.id].num" :long-press="false" :min="0" :max="maxStep"
                          :step="1" :index="index" @min="onMin(item.id)" @plus="plus($event, item.sku_price[0])"
                          @change="onChangeNum($event, item.sku_price[0])"></u-number-box>
                      </view>
                    </view>
                    <!-- 多规格 -->
                    <button class="u-reset-button item-btn sel-sku "
                      :style="item.activity_type ? typeMap[item.activity_type].btnBg : ''" @tap.stop="selSku(item)"
                      v-else>
                      选规格
                    </button>
                  </view>
                  <button class="u-reset-button item-btn sel-sku"
                    :style="item.activity_type ? typeMap[item.activity_type].btnBg : ''" v-else>立即抢购</button>
                </view>
              </view>
            </view>
          </view>

          <!-- 缺省页 -->
          <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'"
            tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>

          <!-- 加载更多 -->
          <u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
          <view class="hack-tabbar"></view>
        </scroll-view>
      </view>
    </view>

    <!-- 洗衣车 -->
    <view class="cart-box x-f">
      <view class="cart-left flex-sub x-f">
        <view class="cart-img-box" @tap="onShowCartList">
          <image class="cart-img" src="/static/imgs/cart2.png" mode=""></image>
          <view class="cu-tag badge" v-if="totalCount.totalNum">
            {{ totalCount.totalNum }}
          </view>
        </view>
        <view class="price-box x-f">
          <text class="price">{{ totalCount.totalPrice.toFixed(2) }}</text>
        </view>
      </view>
      <button class="cu-btn pay-btn" @tap="onPay" :disabled="!isSel">去结算</button>
      <!-- 洗衣车商品列表 -->

      <view class="cart-list-box page_box" :class="showCartList ? '' : 'hide-cart-list'">
        <view class="head_box x-bc cart-list__head px20">
          <label class="check-all x-f" @tap="onAllSel">
            <radio :checked="allSel" :class="{ checked: allSel }" class="check-all-radio blue"></radio>
            <text>全选</text>
          </label>
          <view class="delete-box" @tap="deleteAll">
            <text class="cuIcon-delete"></text>
            <text>删除商品</text>
          </view>
        </view>
        <view class="block cart-list">
          <checkbox-group class="block" v-if="cartList.length">
            <view class="collect-list x-start" v-for="(g, index) in cartList" :key="index">
              <view class="x-c" style="height: 200rpx;" @tap="onSel(index, g.checked)">
                <checkbox :checked="g.checked" :class="{ checked: g.checked }" class="goods-radio round blue">
                </checkbox>
              </view>
              <shopro-mini-card :detail="g.goods" :sku="g.sku_price" :type="'sku'">
                <block slot="goodsBottom">
                  <view class="x-bc price-box">
                    <view class="price">￥{{ g.sku_price.price }}</view>
                    <view class="num-step">
                      <uni-number-box :fontsize='72' @change="onChangeNum($event, g, index)" v-model="g.goods_num"
                        :step="1" :min="0"></uni-number-box>
                    </view>
                  </view>
                </block>
              </shopro-mini-card>
            </view>
          </checkbox-group>
        </view>
      </view>
    </view>

    <!-- 规格弹窗 -->
    <shopro-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo" :buyType="'cart'">
    </shopro-sku>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapActions,
    mapState,
    mapGetters
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        showSku: false, //是否显示规格弹窗
        isEmpty: false,
        currentTab: 0,
        categoryID: 0, //分类id
        scrollLeftTop: 0, //左边滚动距离
        menuHeight: 0, // 左边菜单的高度
        menuItemHeight: 0, // 左边菜单item的高度
        tabbarList: [], //左侧分类列表
        goodsList: [], //商品列表
        goodsInfo: {}, //点击商品详情
        numberDisabled: false, //洗衣车计数器
        loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        currentPage: 1,
        lastPage: 1,
        maxStep: 999,
        typeMap: {
          seckill: {
            text: '秒杀',
            tagBg: '#FF5854',
            goodsBg: '/imgs/tag/seckill_x_bg.png',
            btnText: '去抢购',
            btnBg: 'background: linear-gradient(90deg, #D01325, #ED3C30);'
          },
          groupon: {
            text: '拼团',
            tagBg: '#FE832A',
            goodsBg: '/imgs/tag/groupon_x_bg.png',
            btnText: '马上拼',
            btnBg: 'background: linear-gradient(90deg, #FF6600 0%, #FE832A 100%);'
          }
        },

        allSel: false,
        showCartList: false
      };
    },
    props: {
      categoryStyleId: {
        type: Number,
        default: 0
      }
    },
    computed: {
      ...mapGetters(['totalCount', 'isSel', 'cartNum', 'cartList', 'isLogin']),
      // 洗衣车检测
      checkCart() {
        let obj = {};
        this.cartList.forEach(item => {
          obj[item.goods_id] = {
            num: item.goods_num,
            cartOrderId: item.id
          };
        });
        return obj;
      }
    },
    async created() {
      console.log('%c当前分类：快速购买', 'color:green;background:yellow');
      await this.getCategory();
      let res = await this.getGoodsList();
    },

    methods: {
      ...mapActions(['getCartList', 'changeCartList', 'addCartGoods']),
      ...mapMutations(['changeAllSellect']),
      // 显示洗衣车列表
      onShowCartList() {
        if (!this.takeoutTotalCount.totalNum) return;
        this.showCartList = !this.showCartList;
      },
      hideCartList() {
        this.showCartList = false;
      },
      // 全选
      onAllSel() {
        let that = this;
        that.$store.commit('changeAllSellect'); //按钮切换全选。
        that.$store.commit('getAllSellectCartList', that.allSel); //列表全选
      },
      // 单选
      onSel(index, flag) {
        let that = this;
        that.$store.commit('selectItem', {
          index,
          flag
        });
      },
      // 清空洗衣车
      deleteAll() {
        let that = this;
        let {
          cartList
        } = this;
        let selectedIdsArray = [];
        cartList.map(item => {
          if (item.checked) {
            selectedIdsArray.push(item.id);
          }
        });
        if (selectedIdsArray.length == cartList.length) {
          this.showCartList = false;
        }
        this.changeCartList({
          ids: selectedIdsArray,
          art: 'delete'
        });
      },

      // 跳转详情
      toGoodDetail(id) {
        this.$Router.push({
          path: '/pages/goods/detail',
          query: {
            id: id
          }
        });
      },

      // 百分比
      getProgress(sales, stock) {
        let unit = '';
        if (stock + sales > 0) {
          let num = (sales / (sales + stock)) * 100;
          unit = num.toFixed(2) + '%';
        } else {
          unit = '0%';
        }
        return unit;
      },

      // 加载更多
      loadMore() {
        if (this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.getGoodsList();
        }
      },

      // 获取分类
      async getCategory() {
        const tabbarData = await this.$http('category.detail', {
          id: this.categoryStyleId
        });
        this.tabbarList = tabbarData.data.children;
        this.categoryID = this.tabbarList[0]?.id;
      },

      // 获取分类商品
      getGoodsList() {
        let that = this;
        that.loadStatus = 'loading';
        that.$http(
            'goods.lists', {
              category_id: that.categoryID,
              page: that.currentPage
            },
            '加载中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.goodsList = [...that.goodsList, ...res.data.data];
              that.goodsList.map(item => {
                item.percent = item.stock + item.sales > 0 ? ((item.sales / (item.sales + item
                  .stock)) * 100).toFixed(2) : 0;
              });
              that.isEmpty = !that.goodsList.length;
              that.lastPage = res.data.last_page;
              that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            }
          })
          .then(() => {
            that.isLogin && that.getCartList();
          });
      },

      // 点击左边的栏目切换
      async swichMenu(index) {
        if (index == this.currentTab) return;
        this.currentTab = index;
        this.categoryID = this.tabbarList[index].id;
        this.currentPage = 1;
        this.lastPage = 1;
        this.goodsList = [];
        await this.getGoodsList();
        // 如果为0，意味着尚未初始化
        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
          await this.getElRect('menu-scroll-view', 'menuHeight');
          await this.getElRect('u-tab-item', 'menuItemHeight');
        }
        // 将菜单菜单活动item垂直居中
        this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
      },

      // 获取一个目标元素的高度
      getElRect(elClass, dataVal) {
        new Promise((resolve, reject) => {
          const query = uni.createSelectorQuery().in(this);
          query
            .select('.' + elClass)
            .fields({
              size: true
            }, res => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
            })
            .exec();
        });
      },

      // 加入洗衣车
      addCart(goods) {
        let obj = {
          goods_id: goods.goods_id,
          goods_num: 1,
          sku_price_id: goods.id,
          goods_price: goods.price
        };
        let confirmGoodsList = {
          list: [obj],
          from: 'goods'
        };
        this.addCartGoods(confirmGoodsList).then(res => {
          if (res.code === 1) {
            this.$u.toast(res.msg);
          }
        });
      },
      // 检测商品在洗衣车中的下标
      checkGoodsIndex(id) {
        let cIndex = 0;
        this.cartList.forEach((item, index) => {
          if (id == item.goods_id) {
            cIndex = index;
          }
        });
        return cIndex;
      },

      // 到达最小值
      onMin(goodsId) {
        const that = this;
        let cartGoodId = 0;
        cartGoodId = this.cartList.filter(item => item.goods_id === goodsId)[0].id;
        uni.showModal({
          title: '删除提示',
          confirmColor: '#0099E5',
          content: `是否确认从洗衣车中删除此商品?`,
          success: res => {
            res.confirm && this.changeCartList({
              ids: [cartGoodId],
              art: 'delete'
            });
          }
        });
      },

      // 增加
      plus(e, sku) {
        if (e.value >= sku.stock) {
          this.maxStep = sku.stock > 999 ? 999 : sku.stock;
          this.$u.toast('库存不足');
          return;
        }
        if (this.detail.activity_type === 'seckill' || this.detail.activity_type === 'groupon') {
          let rules = this.detail.activity.rules;
          if (rules.limit_buy != 0 && e.value >= rules.limit_buy) {
            this.maxStep = rules.limit_buy;
            this.$u.toast('本次活动最多购买' + rules.limit_buy + '件');
            return;
          }
        }
      },

      // 更改商品数
      // 更改商品数
      async onChangeNum(e, sku) {
        let gIndex = this.checkGoodsIndex(sku.goods_id);
        if (e.value != this.checkCart[sku.goods_id].num) {
          uni.showLoading({
            mask: true
          });
          this.$set(this.cartList[gIndex], 'goods_num', +e.value);
          await this.changeCartList({
            ids: [this.checkCart[sku.goods_id].cartOrderId],
            goodsNum: +e.value,
            art: 'change'
          });
          await uni.hideLoading();
        }
      },
      // 检测是否为洗衣车商品
      isCart(id) {
        let goodsId = id + '';
        return Object.keys(this.checkCart).includes(goodsId);
      },

      // 添加洗衣车
      async selSku(info) {
        this.goodsInfo = {};
        this.getGoodsDetail(info.id);
        this.showSku = true;
      },
      // 商品详情
      getGoodsDetail(id) {
        let that = this;
        that.$http('goods.detail', {
          id: id
        }).then(res => {
          if (res.code === 1) {
            that.goodsInfo = res.data;
          }
        });
      },

      // 路由跳转
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .hack-tabbar {
    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
    width: 100%;
  }

  // 最外层结构包裹
  .catgory-wrap {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
  }

  .wrapper-box {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧menu
    .u-tab-view {
      width: 200rpx;
      height: 100%;

      .u-tab-item {
        height: 84rpx;
        background: #f6f6f6;
        width: 200rpx;
        padding-left: 16rpx;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 84rpx;
      }

      .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: bold;
        background: #fff;
      }

      .u-tab-item-active::before {
        content: '';
        position: absolute;
        border-left: 4px solid #0099E5;
        height: 32rpx;
        left: 0;
        top: 26rpx;
      }
    }
  }

  // 右侧商品滚动
  .right-wrap {
    background-color: #fff;
    height: 100%;
    width: 100%;

    .category-img {
      width: 505rpx;
      height: 150rpx;
      background: #ccc;
      margin: 20rpx auto;
      border-radius: 10rpx;
    }

    .category-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
      margin: 20rpx;
    }

    .right-box {
      height: 100%;
    }
  }

  .big-goods-card {
    background-color: #fff;
    border-radius: 20rpx;
    width: 100%;
    box-shadow: 0 0 8rpx 2rpx rgba(199, 199, 199, 0.3);
    padding-bottom: 20rpx;

    .img-wrap {
      position: relative;
      overflow: hidden;
      height: 256rpx;
      width: 100%;

      .goods-img {
        width: 100%;
        height: 256rpx;
        border-radius: 20rpx 20rpx 0 0;
        background: #f5f5f5;
      }

      .goods-tag {
        position: absolute;
        top: 16rpx;
        left: 16rpx;
        width: 88rpx;
        height: 88rpx;
      }
    }

    .goods-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      line-height: 36rpx;
      padding-top: 6rpx;

      .title-tag {
        transform: scale(0.9);
        position: relative;
        top: -6rpx;
      }
    }

    .goods-subtitle {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      width: 480rpx;
    }

    .tag-box {
      border: 1rpx solid #ff0000;
      display: inline-block;
      font-size: 20rpx;
      line-height: 30rpx;
      padding: 0 10rpx;
      color: #ff0000;
      border-radius: 8rpx;
    }

    .goods-progress {
      .cu-progress {
        width: 200rpx;
        height: 20rpx;
        background: rgba(#ff6361, 0.2);
        overflow: visible;
        position: relative;

        .progress--ing {
          background: #ff6361;
          border-radius: 20rpx;
        }

        .round-tag {
          position: absolute;
          bottom: 0;
          width: 20rpx;
          height: 28rpx;
          margin-left: -10rpx;

          .round-tag-img {
            width: 20rpx;
            height: 28rpx;
          }
        }
      }

      .googs-send-num {
        font-size: 24rpx;
        font-weight: 400;
        color: #bebebe;
      }
    }

    .price-box {
      vertical-align: text-bottom;

      .price {
        font-size: 36rpx;
        color: #ff0000;
        font-weight: 600;

        &::before {
          content: '￥';
          font-size: 28rpx;
        }

        vertical-align: text-bottom;
      }

      .origin-price {
        vertical-align: text-bottom;
        font-size: 26rpx;
        font-weight: 400;
        text-decoration: line-through;
        color: #c4c4c4;
      }
    }

    .cart-box {

      .cart-btn,
      .sel-sku {
        width: 172rpx;
        line-height: 58rpx;
        background: linear-gradient(90deg, #0099E5, #0099E5);
        box-shadow: 0px 7rpx 6rpx 0px rgba(0, 153, 229, 0.22);
        border-radius: 30rpx;
        padding: 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

  // 洗衣车
  .cart-box {
    position: absolute;
    bottom: 100rpx;
    bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
    z-index: 77;
    height: 80rpx;
    width: 750rpx;

    .cart-left {
      background: linear-gradient(rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
      height: 80rpx;
      position: relative;

      .cart-img-box {
        position: absolute;
        left: 50rpx;
        width: 96rpx;
        height: 96rpx;
        top: -20rpx;
        z-index: 88;

        .cart-img {
          width: 96rpx;
          height: 96rpx;
        }
      }

      .price-box {
        padding-left: 180rpx;

        .original-price {
          font-size: 22rpx;
          font-family: OPPOSans;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
          margin-left: 10rpx;
        }

        .price {
          font-size: 32rpx;
          font-family: OPPOSans;
          font-weight: 500;
          color: rgba(250, 253, 253, 1);

          &::before {
            content: '￥';
            font-size: 22rpx;
          }
        }
      }
    }

    .pay-btn {
      width: 205rpx;
      height: 80rpx;
      border-radius: 0;
      background: linear-gradient(90deg, #4FB8FF, #4782FF);
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }

  .content_box {
    margin-top: 1upx;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    height: 100vh;
    margin-bottom: 40px;
  }

  .wrapper-box {
    flex: 1;
    margin-top: 1upx;
    height: 100vh;
  }

  .scroll-box {
    height: 100vh;
    flex: 1;
    background: #fff;
  }

  .left {
    width: 200upx;
    height: 100vh;
    flex: 1;

    .list-active {
      background: #fff;
      color: #333333 !important;
      font-weight: bold !important;
    }

    .line-active {
      background: #0079ee;
    }

    .type-list {
      height: 84upx;
      position: relative;
      width: 200upx;
      font-size: 28upx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);

      .line {
        width: 10upx;
        height: 100%;
        position: absolute;
        left: 0;
      }
    }
  }

  .right {
    padding: 0 30upx;
    flex: 1;
    height: 100vh;

    .item-list {
      .type-box {
        min-height: 84rpx;

        .type-title {
          font-size: 28rpx;
          font-weight: bold;
          line-height: 84rpx;
        }

        .more {
          font-size: 26rpx;
          color: #999;
        }

        .type-img {
          width: 505rpx;
          height: 150rpx;
          background: #ccc;
          margin: 10rpx 0;
          border-radius: 10rpx;
        }
      }

      .item-box {
        flex-wrap: wrap;

        .goods-item {
          .goods-item--right {
            // @include flex($direction: column, $justify: around, $align: top);
            width: 100%;
            position: relative;
            height: 140rpx;
            margin-left: 20rpx;
          }

          .item-right--bottom {
            width: 100%;
          }

          .item-img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
            // background-color: #ccc;
          }

          .item-right--title {
            width: 350rpx;
            font-weight: bold;
            font-size: 26rpx;
          }

          .item-right--sales {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }

          .price-box {
            .current-price {
              color: #e1212b;
              font-size: 28rpx;

              .current-price--unit {
                font-size: 24rpx;
              }
            }

            .origin-price {
              color: #999;
              font-size: 18rpx;
              margin-left: 12rpx;

              .origin-price--unit {
                font-size: 14rpx;
              }
            }
          }

          .item-btn {
            background: none;
            position: absolute;
            bottom: 0;
            right: 0rpx;
            padding: 0;

            .cuIcon-roundaddfill {
              color: #0079ee;
              font-size: 40rpx;
            }
          }

          .sel-sku {
            width: 120rpx;
            height: 40rpx;
            background: #0079ee;
            border-radius: 20rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(250, 253, 253, 1);
          }

          .num-step {
            /deep/.uni-numbox__value {
              width: 32rpx;
            }
          }
        }
      }
    }
  }
</style>